<template>
  <el-card class="box-card-component">
    <div slot="header" class="box-card-header">
      <img :src="courseInfo.bigPhoto" alt="">
    </div>
    <div style="position:relative;">
      <pan-thumb :image="courseInfo.teacher.largeFaceUrl" class="panThumb" />
    </div>
    <div class="userinfo">
      <div class="name">{{ courseInfo.teacher.teacherName }}</div>
      <div class="school-info">
        <span class="lector">{{ courseInfo.teacher.lectorTitle }}</span> | <span class="school">{{ courseInfo.teacher.schoolName }}</span>
      </div>
    </div>
    <div class="introduce">
      <div class="title">老师简介</div>
      <div class="content">{{ analysisTag(courseInfo.teacher.description) }} <el-button v-if="hasDes" type="text" style="font-size: 14px;padding: 0;" @click="openDetail">查看更多</el-button></div>
    </div>
  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import PanThumb from '@/components/PanThumb/index'

export default {
  components: { PanThumb },

  props: {
    courseInfo: {
      type: Object,
      default() {
        return {
          teacher: {}
        }
      }
    }
  },
  data() {
    return {
      hasDes: false
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  },
  methods: {
    format(percentage) {
      return `${percentage / 20}分`
    },
    openDetail() {
      this.$emit('openDetail', true)
    },
    // 解析标签文本
    analysisTag(str = '') {
      const pattern = /<[a-z]*?>(.*?)<\/[a-z]*?>/
      const res = str.match(pattern)
      // 用来获取标签中的内容
      if (Array.isArray(res) && res.length >= 2) {
        this.hasDes = true
        return res[1].length >= 90 ? res[1].substring(0, 90) + '...' : res[1]
      }
      return '老师没有留下介绍哦^_^'
    }
  }
}
</script>

<style lang="scss" >
.box-card-component{
  .el-card__header {
    padding: 0px!important;
  }
}
</style>
<style lang="scss" scoped>
.box-card-component {
  border-radius: 8px;
  .box-card-header {
    position: relative;
    height: 180px;
    img {
      width: 100%;
      height: 100%;
      transition: all 0.2s linear;
      &:hover {
        transform: scale(1.1, 1.1);
        filter: contrast(130%);
      }
    }
  }
  .mallki-text {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 20px;
    font-weight: bold;
  }
  .panThumb {
    z-index: 100;
    height: 70px!important;
    width: 70px!important;
    position: absolute!important;
    top: -45px;
    left: 0px;
    border: 5px solid #ffffff;
    background-color: #fff;
    margin: auto;
    box-shadow: none!important;
    ::v-deep .pan-info {
      box-shadow: none!important;
    }
  }
  .progress-item {
    margin-bottom: 10px;
    font-size: 14px;
  }
  @media only screen and (max-width: 1510px){
    .mallki-text{
      display: none;
    }
  }
}
.userinfo{
  .name, .school-info{
    text-align: center;
    color: #adadad;
  }
  .name{
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: bold;
  }
  .school-info{
    font-size: 14px;
  }
}
.introduce{
  height: 20vh;
  overflow: hidden;
  margin-top: 10px;
  .title{
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .content{
    text-align: justify;
    text-align-last: left;
    font-size: 12px;
    line-height: 18px;
  }
}
</style>
